<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="newcreative_main">
            <el-row type="flex" justify="start">
                <div class="newcreative_warp" v-loading="loading">
                    <el-form :model="newcreative" ref="newcreative" :rules="rules" label-width="150px">
                        <div class="filters-wrapper">
                            <div class="title total_title">{{title}}</div>
                            <el-form-item label="创意包名称：" prop="title">
                                <el-input v-model="newcreative.title">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="创意包描述：" prop="description">
                                <el-input v-model="newcreative.description">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">设置投放位置</div>
                            <el-form-item label="广告位置：" required>
                                <ul class="tab-tilte">
                                    <li @click="clickAdLocation(1)" :class="{active:locationCur==1}">优选广告位</li>
                                    <li @click="clickAdLocation(2)" :class="{active:locationCur==2}">按媒体指定位置</li>
                                    <li @click="clickAdLocation(3)" :class="{active:locationCur==3}">按场景指定位置</li>
                                </ul>
                                <div class="tab-content">
                                    <div v-show="locationCur==1"></div>
                                    <div v-show="locationCur==2">
                                        <div class="location_wrap">
                                            <div class="location_head">APP名称</div>
                                            <el-checkbox-group v-model="newcreative.inventory_type">
                                                <el-checkbox v-for="(v, k) in config.inventory_type" :key="k"
                                                    :label="k">{{v}}</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </div>
                                    <div v-show="locationCur==3">
                                        <div class="location_wrap">
                                            <div class="location_head">位置选择</div>
                                            <el-radio-group v-model="newcreative.scene_inventory">
                                                <el-radio v-for="(v, k) in config.scene_inventory" :key="k" :label="k">
                                                    {{v}}</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">制作创意</div>
                            <el-form-item label="创意方式：" required>
                                <el-radio-group v-model="newcreative.CreativeWay">
                                    <el-radio-button label="1">程序化创意</el-radio-button>
                                    <el-radio-button disabled label="2">自定义创意</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="素材添加方式：" required>
                                <el-radio-group v-model="newcreative.CreativeWay">
                                    <el-radio-button label="1">自定义上传</el-radio-button>
                                    <el-radio-button disabled label="2">选择程序化创意包</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="素材：" required prop="librarys">
                                <el-button type="primary" @click="openMaterial">选择素材</el-button>
                                <el-row style="margin: 10px 0;">图片创意个数： <span
                                        style="margin-right: 10px;">{{libraryPicTotal}}</span>视频创意个数：
                                    <span>{{libraryVideoTotal}}</span></el-row>
                                <div style="margin: 10px 0;">
                                    <el-radio-group v-model="libraryselec">
                                        <el-radio-button label="all">全部素材</el-radio-button>
                                        <el-radio-button label="video_h">横版视频</el-radio-button>
                                        <el-radio-button label="video_v">竖版视频</el-radio-button>
                                        <el-radio-button label="image_h">横版大图</el-radio-button>
                                        <el-radio-button label="image_v">竖版大图</el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div class="library_wrap libraryselec">
                                    <div class="library_list libraryselec_list"
                                        v-for="(library, index) in selectLibrary" :key="index">
                                        <div class="library_card libraryselec_card">
                                            <video class="library_list_video" controls
                                                v-if="library.video !== undefined">
                                                <source :src="library.video" type="video/mp4"></video>
                                            <el-image fit="contain" class="library_list_img" :src="library.img">
                                            </el-image>
                                        </div>
                                        <el-button @click="deleteLibrary(library.id)" size="mini" type="danger">删除
                                        </el-button>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="标题：" required prop="headlinedata">
                                <el-row type="flex" align="middle">
                                    <el-button type="primary" @click="openTitle">选择标题</el-button>
                                    <span style="margin-left: 15px;">已选： {{titleTotal}}个</span>
                                </el-row>
                                <el-row type="flex" style="flex-direction: column;line-height: 1.5;">
                                    <el-col v-for="item in newcreative.headlinedata" :key="item.id" :span="12"
                                        style="border-bottom: 1px solid #eee;padding:8px 0 6px 0;">
                                        <div class="biaot_list"><span>{{item.title}}</span><el-button @click="deleteTitle(item.id)" type="danger" size="mini" icon="el-icon-delete" circle></el-button></div>
                                        <!-- <el-form-item label="动态词包：" style="margin-left: -66px;">
                                            <el-checkbox-group v-model="wordpackage">
                                                <el-checkbox :label="1">地点</el-checkbox>
                                                <el-checkbox :label="2">年龄</el-checkbox>
                                                <el-checkbox :label="3">性别</el-checkbox>
                                                <el-checkbox :label="4">时间</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item> -->
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="附加创意类型：" required>
                                不设置
                            </el-form-item>
                            <!-- <el-form-item label="行动号召：" required>
                                <el-select v-model="newcreative.CellAction" placeholder="请选择">
                                    <el-option label="查看详情" value="1"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="来源：" required>
                                <el-input v-model="newcreative.source" maxlength="10" show-word-limit>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="品牌主页：" required>
                                <el-radio-group v-model="newcreative.BrandPage">
                                    <el-radio-button label="1">不开启</el-radio-button>
                                    <el-radio-button disabled label="2">开启抖音主页</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <!-- <el-form-item label="广告头像：" required>
                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                    <img v-if="imageUrl" src="" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item> -->
                            <el-form-item label="自动生成视频素材：" required>
                                <el-radio-group v-model="newcreative.is_presented_video">
                                    <el-radio-button label="0">不启用</el-radio-button>
                                    <el-radio-button label="1">启用</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="最优创意衍生计划：" required>
                                <el-radio-group v-model="newcreative.generate_derived_ad">
                                    <el-radio-button label="0">不启用</el-radio-button>
                                    <el-radio-button label="1">启用</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="广告评论：" required>
                                <el-radio-group v-model="newcreative.is_comment_disable">
                                    <el-radio-button label="1">关闭</el-radio-button>
                                    <el-radio-button label="0">开启</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="创意展现：" required>
                                <el-radio-group v-model="newcreative.creative_display_mode">
                                    <el-radio-button label="CREATIVE_DISPLAY_MODE_CTR">优选模式</el-radio-button>
                                    <el-radio-button label="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">高级创意</div>
                            <el-form-item label="高级创意：" required>
                                <el-radio-group v-model="newcreative.creative_display_mode_adv">
                                    <el-radio-button label="1">不启用</el-radio-button>
                                    <el-radio-button disabled label="2">启用</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">创意分类</div>
                            <el-form-item label="创意分类：" required>
                                <el-cascader v-model="newcreative.third_industry_id" :options="industry"
                                    placeholder="请选择">
                                </el-cascader>
                            </el-form-item>
                            <el-form-item label="创意标签：" required>
                                <el-button type="primary" @click="openLabel">选择创意标签</el-button>
                                <el-row type="flex" justify="space-between" class="labelList_head">
                                        {{newcreative.source_label.title}}：{{newcreative.source_label.content}}
                                </el-row>
                                <!-- <el-input style="width: 450px;" v-model="newcreative.labelList"
                                    placeholder="最多20个标签，每个不超过10个字，可空格分隔">
                                    <el-button slot="append">添加</el-button>
                                </el-input>
                                <div class="labelList_wrap">
                                    <el-row type="flex" justify="space-between" class="labelList_head">
                                        已选
                                        <el-button type="text">清空</el-button>
                                    </el-row>
                                    <div class="labelList_content">
                                        <div class="labelList_item">裤子
                                            <i class="el-icon-close fr"></i>
                                        </div>
                                        <div class="labelList_item">裤子<i class="el-icon-close"></i></div>
                                    </div>
                                </div> -->
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper">
                            <div class="title total_title">监测链接</div>
                            <el-form-item label="展示：">
                                <el-input v-model="newcreative.track_url" placeholder="请输入链接地址">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="点击：">
                                <el-input v-model="newcreative.action_track_url" placeholder="请输入链接地址">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="视频播放：">
                                <el-input v-model="newcreative.video_play_track_url" placeholder="请输入链接地址">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="视频播完：">
                                <el-input v-model="newcreative.video_play_done_track_url" placeholder="请输入链接地址">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="视频有效播放：">
                                <el-input v-model="newcreative.video_play_effective_track_url" placeholder="请输入链接地址">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="filters-wrapper" style="margin-bottom: 8px;">
                            <el-form-item style="margin-bottom: 0;">
                                <el-row type="flex" justify="end">
                                    <el-button @click="back">取消</el-button>
                                    <el-button @click="saveCreative" :loading="saving" type="primary">保存创意包</el-button>
                                </el-row>
                            </el-form-item>
                        </div>
                        <!-- 分割线 -->
                        <el-dialog title="素材库" :visible.sync="Materialku" :close-on-click-modal="false" center>
                            <el-checkbox-group v-model="selectMaterial">
                                <el-tabs v-model="activeMaterial" @tab-click="handleTabClick('activeMaterial')">
                                    <el-tab-pane label="个人素材库" name="person">
                                        <el-row type="flex" align="middle" justify="start">
                                            <el-radio-group v-model="librarytype" style="margin-bottom: 20px;">
                                                <el-radio-button label="all">全部素材</el-radio-button>
                                                <el-radio-button label="video_h">横版视频</el-radio-button>
                                                <el-radio-button label="video_v">竖版视频</el-radio-button>
                                                <el-radio-button label="image_h">横版大图</el-radio-button>
                                                <el-radio-button label="image_v">竖版大图</el-radio-button>
                                            </el-radio-group>
                                        </el-row>
                                        <el-row type="flex" justify="start" align="middle">
                                            <div class="form-wrapper" style="width: 300px;">
                                                <el-input placeholder="请输入素材名称" size="small" v-model="jd_search"
                                                    class="input-with-select">
                                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                                </el-input>
                                            </div>
                                        </el-row>
                                        <div class="library_wrap">
                                            <div class="library_list" v-for="(library, index) in filterLibrary" :key="index">
                                                <div class="library_card">
                                                    <video class="library_list_video" controls
                                                        v-if="library.video !== undefined">
                                                        <source :src="library.video" type="video/mp4"></video>
                                                    <el-image fit="contain" class="library_list_img" :src="library.img">
                                                    </el-image>
                                                </div>
                                                <div class="library_card_name">
                                                    <el-checkbox class="check_wrap" v-if="library.img || library.has_cover" :key="library.id" :label="library.id">{{library.title}}
                                                    </el-checkbox>
                                                    <div class="nofm_wrap" v-if="!library.img && library.has_cover != 1">
                                                        {{library.title}}(无封面)
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="项目素材库" name="project">
                                        <el-row type="flex" align="middle" justify="start">
                                            <el-radio-group v-model="librarytype" style="margin-bottom: 20px;">
                                                <el-radio-button label="all">全部素材</el-radio-button>
                                                <el-radio-button label="video_h">横版视频</el-radio-button>
                                                <el-radio-button label="video_v">竖版视频</el-radio-button>
                                                <el-radio-button label="image_h">横版大图</el-radio-button>
                                                <el-radio-button label="image_v">竖版大图</el-radio-button>
                                            </el-radio-group>
                                        </el-row>
                                        <el-row type="flex" justify="start" align="middle">
                                            <div class="form-wrapper" style="width: 300px;">
                                                <el-input placeholder="请输入素材名称" size="small" v-model="jd_search"
                                                    class="input-with-select">
                                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                                </el-input>
                                            </div>
                                        </el-row>
                                        <div class="library_wrap">
                                            <div class="library_list" v-for="(library, index) in filterLibrary" :key="index">
                                                <div class="library_card">
                                                    <video class="library_list_video" controls
                                                        v-if="library.video !== undefined">
                                                        <source :src="library.video" type="video/mp4"></video>
                                                    <el-image fit="contain" class="library_list_img" :src="library.img">
                                                    </el-image>
                                                </div>
                                                <div class="library_card_name">
                                                    <el-checkbox class="check_wrap" v-if="library.img || library.has_cover" :key="library.id" :label="library.id">{{library.title}}
                                                    </el-checkbox>
                                                    <div class="nofm_wrap" v-if="!library.img && library.has_cover != 1">
                                                        {{library.title}}(无封面)
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-checkbox-group>
                            <el-row type="flex" align="middle" justify="center">
                                <el-button size="small" @click="Materialku = false">取 消</el-button>
                                <el-button size="small" type="primary" @click="addMaterial">添 加</el-button>
                            </el-row>
                        </el-dialog>
                        <!-- 分割线 -->
                        <el-dialog title="标题库" :visible.sync="creativetitle" :close-on-click-modal="false" width="700px" center>
                            <div class="titleku">
                                <el-checkbox-group v-model="selectTitle">
                                    <el-tabs v-model="activetitle" @tab-click="handleTabClick('selectTitle')">
                                        <el-tab-pane label="个人标题" name="person">
                                            <el-checkbox v-for="item in headlinedata" :key="item.id" :label="item.id">
                                                {{item.title}}</el-checkbox>
                                        </el-tab-pane>
                                        <el-tab-pane label="项目标题" name="project">
                                            <el-checkbox v-for="item in headlinedata" :key="item.id" :label="item.id">
                                                {{item.title}}</el-checkbox>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-checkbox-group>
                            </div>
                            <el-row type="flex" align="middle" justify="center">
                                <el-button size="small" @click="creativetitle = false">取 消</el-button>
                                <el-button size="small" type="primary" @click="addTitle">添 加</el-button>
                            </el-row>
                        </el-dialog>
                        <!-- 分割 -->
                        <el-dialog title="选择创意标签" :visible.sync="creativelabel" :close-on-click-modal="false" width="500px" center>
                                <el-tabs v-model="activelabel"  @tab-click="handleTabClick('activelabel')">
                                    <el-tab-pane label="个人标签库" name="person">
                                        <el-select v-model="selectLabelPerson" placeholder="请选择个人创意标签">
                                            <el-option v-for="item in labeldata" :key="item.id" :label="`${item.title}：${item.content}`" :value="item.id"></el-option>
                                        </el-select>
                                    </el-tab-pane>
                                    <el-tab-pane label="项目标签库" name="project">
                                        <el-select v-model="selectLabelProject" placeholder="请选择素材创意标签">
                                            <el-option v-for="item in labeldata" :key="item.id" :label="`${item.title}：${item.content}`" :value="item.id"></el-option>
                                        </el-select>
                                    </el-tab-pane>
                                </el-tabs>
                            <el-row type="flex" align="middle" justify="center" style="margin-top: 30px;">
                                <el-button size="small" @click="creativelabel = false">取 消</el-button>
                                <el-button size="small" type="primary" @click="addLabel">确 认</el-button>
                            </el-row>
                        </el-dialog>
                    </el-form>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import {parseObject} from "@/settings"
    export default {
        data() {
            // var validateArrayEmpty = (rule, value, callback) => {
            //     if (!this.selectMaterial || !this.selectMaterial.length == 0) {
            //         callback(new Error("请选择素材"));
            //     }
            //     callback();
            // }
            return {
                projectId: 0,
                creativeId: 0,
                title: '',
                projectDetail: {},
                libraryselec: 'all',
                loading: false,
                wordpackage: [],
                Materialku: false,
                imageUrl: '',
                creativetitle: false,
                librarytype: 'all',
                activeMaterial: 'person',
                activetitle: 'person',
                persontitle: [],
                projecttitle: [],
                librarys: [],
                libraryTotal: 0,
                headlinedata: [],
                headlineTotal: 0,
                jd_search: '',
                locationCur: 1,
                industryArray: [],
                industry: [],
                labeldata: [],
                selectMaterial: [],
                selectTitle: [],
                creativelabel: false,
                activelabel:'person',
                selectLabel: '',
                selectLabelPerson: '',
                selectLabelProject: '',
                newcreative: {
                    id: 0,
                    title: '',
                    description: '',
                    smart_inventory: 1, //是否使用优选广告位
                    source: '',
                    CreativeWay: 1,
                    BrandPage: 1,
                    inventory_type: [],
                    librarys: [],
                    headlinedata: [],
                    scene_inventory: 'FEED_SCENE',
                    creative_display_mode: 'CREATIVE_DISPLAY_MODE_CTR',
                    creative_display_mode_adv: 1,
                    is_presented_video: 0,
                    generate_derived_ad: 0,
                    is_comment_disable: 1,
                    third_industry_id: [],
                    source_label: {id: 0, title: '', content:''},
                    // label: {title:''},
                    track_url: '',
                    action_track_url: '',
                    video_play_track_url: '',
                    video_play_done_track_url: '',
                    video_play_effective_track_url: '',
                },
                rules: {
                    title: [{
                            required: true,
                            message: '请输入创意包名称',
                            trigger: 'blur'
                        },
                        // { validator: validateId, trigger: 'blur' }
                    ],
                    description: [{
                            required: true,
                            message: '请输入创意包描述',
                            trigger: 'blur'
                        },
                        // { validator: validateId, trigger: 'blur' }
                    ],
                    librarys: [
                        {
                            required: true,
                            message: '请选择素材',
                            trigger: 'blur'
                        },
                        // { validator: validateArrayEmpty, trigger: 'blur' }
                    ],
                    headlinedata: [
                        {
                            required: true,
                            message: '请选择标题',
                            trigger: 'blur'
                        },
                        // { validator: validateArrayEmpty, trigger: 'blur' }
                    ],
                },
                config: {
                    inventory_type: {
                        'INVENTORY_FEED': '头条信息流',
                        // 'INVENTORY_TEXT_LINK':'头条文章详情页（已废弃）',
                        'INVENTORY_VIDEO_FEED': '西瓜信息流',
                        'INVENTORY_HOTSOON_FEED': '火山信息流',
                        'INVENTORY_AWEME_FEED': '抖音信息流',
                        'INVENTORY_UNION_SLOT': '穿山甲',
                        // 'UNION_BOUTIQUE_GAME': '穿山甲精选休闲游戏',
                        // 'INVENTORY_UNION_SPLASH_SLOT': '穿山甲开屏广告',
                        // 'INVENTORY_AWEME_SEARCH': '搜索广告——抖音位',
                        // 'INVENTORY_SEARCH': '搜索广告——头条位',
                        // 'INVENTORY_UNIVERSAL': '通投智选',
                        // 'INVENTORY_BEAUTY': '轻颜相机',
                        // 'INVENTORY_PIPIXIA': '皮皮虾',
                        // 'INVENTORY_AUTOMOBILE': '懂车帝',
                        // 'INVENTORY_STUDY': '好好学习',
                        // 'INVENTORY_FACE_U': 'faceu',
                    },
                    scene_inventory: {
                        'VIDEO_SCENE': '沉浸式竖版视频场景广告位',
                        'FEED_SCENE': '信息流场景广告位',
                        'TAIL_SCENE': '视频后贴和尾帧场景广告位',
                    }
                },
                saving: false,
            }
        },
        computed: {
            titleTotal: function () {
                return this.newcreative.headlinedata.length
            },
            libraryPicTotal: function () {
                let total = 0
                this.newcreative.librarys.forEach(ele => {
                    if (ele.file_type && ele.file_type.indexOf('image') != -1) {
                        total = total + 1
                    }
                })
                return total
            },
            libraryVideoTotal: function () {
                let total = 0
                this.newcreative.librarys.forEach(ele => {
                    if (ele.file_type && ele.file_type.indexOf('video') != -1) {
                        total = total + 1
                    }
                })
                return total
            },
            filterLibrary: function () {
                if (this.librarytype == 'all') {
                    return this.librarys
                }
                let ret = []
                this.librarys.forEach(ele => {
                    if (ele.type && ele.type == this.librarytype) {
                        ret.push(ele)
                    }
                })
                return ret
            },
            selectLibrary: function () {
                if (this.libraryselec == 'all') {
                    return this.newcreative.librarys
                }
                let ret = []
                this.newcreative.librarys.forEach(ele => {
                    if (ele.type && ele.type == this.libraryselec) {
                        ret.push(ele)
                    }
                })
                return ret
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
            this.creativeId = this.$router.currentRoute.params.aid
            if (this.creativeId > 0) {
                this.title = '修改创意包'
            } else {
                this.title = '新建创意包'
            }
            for (const key in this.config.inventory_type) {
                this.newcreative.inventory_type.push(key)
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        this.projectDetail = e.data
                    })
                this.loading = true
                this.$axios.get('/industry').then(e => {
                    let data = e.data.list
                    this.industry = []
                    let result = []
                    let map = {}
                    data.forEach(item => {
                        map['' + item.industry_id] = item
                    });
                    // console.log(map)
                    data.forEach(item => {
                        let kk = 'first_industry_id'
                        if (item['level'] == 3) {
                            kk = 'second_industry_id'
                        }
                        item['label'] = item['industry_name']
                        item['value'] = '' + item['industry_id']
                        let parent = map['' + item[kk]]
                        if (item['level'] != '1' && parent) {
                            (parent.children || (parent.children = [])).push(item)
                        } else {
                            result.push(item)
                        }
                    })
                    this.industryArray = data
                    this.industry = result
                    // this.checkIndustry()
                    // console.log('this.industry', this.industry)
                    if (this.creativeId > 0) {
                        // 加载数据
                        this.$axios.get('/creative/detail', {
                                id: this.creativeId
                            })
                            .then(e => {
                                this.newcreative = parseObject(this.newcreative, e.data)
                                this.checkIndustry()
                                if (this.newcreative.smart_inventory == 1) {
                                    this.clickAdLocation(1)
                                } else if (this.newcreative.scene_inventory != '') {
                                    this.clickAdLocation(3)
                                } else {
                                    this.clickAdLocation(2)
                                }
                                this.loading = false
                                console.log('this.newcreative', this.newcreative, e.data)
                            }).catch((e) => {
                                this.$alert(e.msg ? e.msg : '加载失败', '提示', {
                                    confirmButtonText: '重试',
                                    callback: () => {
                                        location.reload()
                                    }
                                })
                            })
                    } else {
                        this.loading = false
                    }
                }).catch((e) => {
                    this.$alert(e.msg ? e.msg : '加载失败', '提示', {
                        confirmButtonText: '重试',
                        callback: () => {
                            location.reload()
                        }
                    })
                })
                
            },
            checkIndustry() {
                if (this.newcreative.third_industry_id && this.industry.length > 0) {
                    // this.newcreative.third_industry_id = 
                    this.industryArray.forEach(ele => {
                        if (ele.third_industry_id == this.newcreative.third_industry_id) {
                            this.newcreative.third_industry_id = ["" + ele.first_industry_id, "" + ele.second_industry_id, "" + ele.third_industry_id]
                        }
                    })
                    // console.log('this.newcreative.third_industry_id', this.newcreative.third_industry_id)
                }
            },
            clickAdLocation(i) {
                this.locationCur = i
                this.newcreative.smart_inventory = i == 1 ? 1 : 0
                // if (this.locationCur != 2) {
                //     this.newcreative.inventory_type = []
                // } else {
                //     for (const key in this.config.inventory_type) {
                //         this.newcreative.inventory_type.push(key)
                //     }
                // }
            },
            loadLibrary(param) {
                param['type'] = this.activeMaterial
                param['file_type'] = this.librarytype == 'all' ? '' : this.librarytype
                param['number'] = this.pageSize
                param['projectid'] = this.projectId
                param['keyword'] = this.jd_search
                param['has_cover'] = 1
                // console.log('loading', param)
                this.$axios.get('/library/list', param)
                    .then(e => {
                        this.loading = false
                        e.data.items.forEach((ele) => {
                            ele.checked = false
                        })
                        this.librarys = e.data.items
                        this.libraryTotal = e.data.total
                    })
            },
            loadTitleData(param) {
                param['type'] = this.activetitle
                param['projectid'] = this.projectId
                this.$axios.get('/titile', param)
                    .then(e => {
                        this.headlinedata = e.data.items
                        this.headlineTotal = e.data.total
                        this.loading = false
                    })
            },
            loadLabel(param) {
                param['type'] = this.activelabel
                param['projectid'] = this.projectId
                this.$axios.get('/label', param)
                    .then(e => {
                        this.labeldata = e.data.items
                        this.loading = false
                    })
            },
            openLabel() {
                this.creativelabel = true
                this.loading = true
                this.loadLabel({})
            },
            addLabel() {
                // console.log('activelabel', this.activelabel)
                let k = this.activelabel == 'person' ? this.selectLabelPerson : this.selectLabelProject
                this.creativelabel = false
                let e = this.labeldata.find(ele => {
                    return ele.id == k
                })
                this.newcreative.source_label = e
            },
            openTitle() {
                this.creativetitle = true
                this.loading = true
                this.loadTitleData({})
            },
            addTitle() {
                this.selectTitle.forEach(id => {
                    if (this.newcreative.headlinedata.findIndex(ele => ele.id == id) != -1) {
                        return
                    }
                    let e = this.headlinedata.find(ele => {
                        return ele.id == id
                    })
                    if (e) {
                        this.newcreative.headlinedata.push(e)
                    }
                })
                this.creativetitle = false
            },
            deleteLibrary(id) {
                let idx = this.newcreative.librarys.findIndex(ele => {
                    return ele.id == id
                })
                if (idx > -1) {
                    this.newcreative.librarys.splice(idx, 1)
                }
            },
            deleteTitle(id) {
                let idx = this.newcreative.headlinedata.findIndex(ele => {
                    return ele.id == id
                })
                if (idx > -1) {
                    this.newcreative.headlinedata.splice(idx, 1)
                }
            },
            handleTabClick(tabType) {
                // console.log('tabtype', tabType, this[tabType])
                if (tabType == 'activeMaterial') {
                    // if (this[tabType] == 'person') {

                    // } else {

                    // }
                    this.loadLibrary({})
                } else if(tabType == 'selectTitle') {
                    this.loadTitleData({})
                } else if(tabType == 'activelabel') {
                    this.loadLabel({})
                }
            },
            openMaterial() {
                this.Materialku = true
                this.loading = true
                this.loadLibrary({})
            },
            addMaterial() {
                this.selectMaterial.forEach(id => {
                    if (this.newcreative.librarys.findIndex(ele => ele.id == id) != -1) {
                        return
                    }
                    let e = this.librarys.find(ele => {
                        return ele.id == id
                    })
                    if (e) {
                        this.newcreative.librarys.push(e)
                    }
                })
                this.Materialku = false
            },
            saveCreative() {
                let postData = JSON.parse(JSON.stringify(this.newcreative))
                delete postData.librarys
                delete postData.headlinedata
                delete postData.BrandPage
                delete postData.CellAction
                delete postData.CreativeWay
                delete postData.source_label
                let json = {}
                let tmp = []
                this.newcreative.librarys.forEach(ele => {
                    tmp.push(ele.id_media)
                })
                json['media_ids'] = tmp
                tmp = []
                this.newcreative.headlinedata.forEach(ele => {
                    tmp.push(ele.id)
                })
                json['title_ids'] = tmp
                json['label_id'] = this.newcreative.source_label.id ? this.newcreative.source_label.id : ''
                switch (this.locationCur) {
                    case 1:
                        // 优选广告位
                        postData.smart_inventory = 1
                        postData.inventory_type = []
                        postData.scene_inventory = ''
                        break
                    case 2:
                        postData.smart_inventory = 0
                        // postData.inventory_type = []
                        postData.scene_inventory = ''
                        break
                    case 3:
                        postData.smart_inventory = 0
                        postData.inventory_type = []
                        // postData.scene_inventory = ''
                        break
                    default:
                        break;
                }

                postData['json'] = JSON.stringify(json)
                postData['projectid'] = this.projectId;
                console.log('post data', postData)
                this.saving = true
                this.$refs['newcreative'].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/creative/save', postData)
                            .then((e) => {
                                this.saving = false
                                this.$message({
                                    type: 'success',
                                    message: e.msg ? e.msg : '保存成功!'
                                })
                                // 跳转 audience/1/1
                                this.$router.replace({
                                    path: '/creative/' + this.projectId
                                })
                            }).catch(() => {
                                this.saving = false
                            })
                    } else {
                        this.saving = false
                    }
                })
            },
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>